<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="js/kuangjia-bootstrap.css">
    <link rel="stylesheet" href="js/datepicker/skin/WdatePicker.css">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
        }
        
        .box1 {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(153, 153, 153, 0.3);
            display: none;
        }
        
        .but {
            background-color: #fff;
            position: absolute;
            top: 40%;
            left: 45%;
            width: 200px;
            height: 100px;
        }
        
        #but1,
        #but2 {
            margin-top: 30px;
        }
        
        #but1 {
            margin-left: 40px;
        }
        
        .templete {
            display: none;
        }
        
        caption {
            font-size: 28px;
        }
        
        .text {
            display: block;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            background-color: darkturquoise;
            border-radius: 5px;
            position: absolute;
            top: 10px;
            right: 50px;
            cursor: pointer;
        }
        
        .box2 {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(153, 153, 153, 0.3);
            display: none;
        }
        
        .check {
            width: 500px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
            padding: 20px;
        }
        
        .addButton {
            margin-top: 5px;
        }
        
        .false {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <span class="text">添加学生信息</span>
    <table class="table">
        <caption>学生信息管理</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>所在城市</th>
                <th>入学时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="templete">
                <td class="id"></td>
                <td class="name"></td>
                <td class="age"></td>
                <td class="sex"></td>
                <td class="city"></td>
                <td class="date"></td>
                <td>
                    <button class="btn btn-danger delete">删除</button>
                    <button class="btn btn-primary redact">编辑</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="box1">
        <div class="but">
            <button class="btn btn-warning" id="but1">确定</button>
            <button class="btn btn-success" id="but2">取消</button>
        </div>
    </div>
    <div class="box2">
        <div class="check">
            <label for="exampleInputEmail1">姓名</label>
            <input type="text" class="form-control" id="newname" placeholder="请输入姓名">
            <label for="exampleInputEmail1">年龄</label>
            <input type="text" class="form-control" id="newage" placeholder="请输入年龄">
            <label for="exampleInputEmail1">性别</label></br>
            <input type="radio" name="u" checked class="man">男
            <input type="radio" name="u">女</br>
            <label for="exampleInputEmail1">籍贯</label></br>
            <select name="" id="province"></select>
            <select name="" id="city"></select>
            <select name="" id="area"></select></br>
            <label for="exampleInputEmail1">入学时间</label>
            <input type="text" class="form-control" id="newdate" onclick="WdatePicker()" placeholder="请输入时间">
            <button class="btn btn-success addButton">添加</button>
            <button class="btn btn-success false">取消</button>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/datepicker/WdatePicker.js"></script>
    <script src="js/city.js"></script>
    <script>
        let netaddress = "http://10.35.170.248:81"
        let templete = $(".templete")
        $.ajax({
            url: `${netaddress}/getStudents`,
            success(data) {
                data.forEach(item => {
                    let newitem = templete.clone(true)
                    newitem.attr("class", "")
                    newitem.find(".id").html(item.id)
                    newitem.find(".name").html(item.name)
                    newitem.find(".age").html(item.age)
                    newitem.find(".sex").html(item.sex ? "男" : "女")
                    newitem.find(".city").html(item.city)
                    newitem.find(".date").html(item.jsonData)
                    $("tbody").append(newitem)
                })
            }
        })
        $(".delete").click(function() {
            $(".box1").css({
                display: "block"
            })
            _this = $(this)
            $("#but1").click(function() {
                $.ajax({
                    url: `${netaddress}/deleteStudents`,
                    data: {
                        id: _this.closest("tr").find(".id").html()
                    },
                    success(data) {
                        if (data === "success") {
                            _this.closest("tr").fadeOut()
                            $(".box1").css({
                                display: "none"
                            })
                        } else {
                            alert("操作失败")
                        }
                    }
                })
            })
            $("#but2").click(function() {
                $(".box1").css({
                    display: "none"
                })
            })

        })
        $(".text").click(function() {
            $(".box2").css({
                display: "block"
            })
        })
        let province = $("#province")
        let city = $("#city")
        let area = $("#area")
        citys.forEach(item => {
            let option = $(`<option>${item.provinceName}</option>`)
            province.append(option)
        })
        citys[0].mallCityList.forEach(item => {
            let option = $(`<option>${item.cityName}</option>`)
            city.append(option)
        })
        citys[0].mallCityList[0].mallAreaList.forEach(item => {
            let option = $(`<option>${item.areaName}</option>`)
            area.append(option)
        })
        province.change(function() {
            updataCity.call(this)
            updataArea.call(city[0])
        })
        city.change(function() {
            updataArea.call(this)
        })

        function updataCity() {
            city.html("")
            cityList = citys[this.selectedIndex].mallCityList
            cityList.forEach(item => {
                let option = $(`<option>${item.cityName}</option>`)
                city.append(option)
            })
        }

        function updataArea() {
            area.html("")
            let areaList = cityList[this.selectedIndex].mallAreaList
            areaList.forEach(item => {
                let option = $(`<option>${item.areaName}</option>`)
                area.append(option)
            })
        }
        $(".addButton").click(function() {
            if ($("#newname").val() && $("#newage").val() && $("#newdate").val()) {
                $(".box2").css({
                    display: "none"
                })
                $.ajax({
                    url: `${netaddress}/addStudents`,
                    data: {
                        name: $("#newname").val(),
                        age: $("#newage").val(),
                        sex: $(".man")[0].checked ? 1 : 0,
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        date: $("#newdate").val(),
                    },
                    success(data) {
                        if (data === "success") {
                            history.go(0)
                        } else {
                            alert("操作失败")
                        }
                    }
                })
            }
        })
        $(".false").click(function() {
            $(".box2").css({
                display: "none"
            })
        })
        document.onkeyup = function(event) {
            if (event.keyCode === 13) {
                $(".addButton").click()
            }
            if (event.keyCode === 27) {
                $(".false").click()
            }
        }
        $(".redact").click(function() {
            $(".box2").css({
                display: "block"
            })
            $("#newname").val($(this).closest("tr").find(".name").html())
            $("#newage").val($(this).closest("tr").find(".age").html())
            $("#newdate").val($(this).closest("tr").find(".date").html())
            $(".addButton").click(() => {
                $.ajax({
                    url: `${netaddress}/redactStudents`,
                    data: {
                        id: $(this).closest("tr").find(".id").html(),
                        name: $("#newname").val(),
                        age: $("#newage").val(),
                        sex: $(".man")[0].checked ? 1 : 0,
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        date: $("#newdate").val(),
                    },
                    success(data) {
                        if (data === "error") {
                            alert("修改失败")
                        } else {
                            history.go(0)
                        }
                    }
                })
            })
        })
    </script>
</body>

</html>